<template>
	<div>
		<!-- 搜索表单 -->
		<yd-form ref="myForm" :options="formOptions" :model="formData" :btns="formBtns" @form-init="handleFormInited">
			<template #form-btn="props">
				<div>
					<el-button class="yd-form-btn" type="primary" @click="handleSearch(props.model)">查询</el-button>
				</div>
			</template>
		</yd-form>
		<!-- 列表 -->
		<yd-table
			:formData="formData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="handleSearch"
			@currentChangeHandler="handleSearch"
			@sortChangeHandler="handleSearch"
			@selectionChangeHandler="handleSelectionChange"
		></yd-table>
		<!-- 弹出层 -->
		<el-dialog v-model="dialog.addOrEdit.open" :title="dialog.addOrEdit.title" width="600px" append-to-body center>
			<el-form ref="addOrEditForm" :model="dialog.addOrEdit.form" :rules="dialog.addOrEdit.rule" label-width="120px">
				<el-form-item label="所属系统" prop="systemId">
					<el-select v-model="dialog.addOrEdit.form.systemId" filterable placeholder="请选择所属系统" width="100%">
						<el-option v-for="(value, key, index) in options.system" :key="index" :label="value" :value="parseInt(key)"></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="所属单位" prop="orgCode">
					<el-select v-model="dialog.addOrEdit.form.orgCode" filterable placeholder="请选择所属单位" width="100%">
						<el-option v-for="(value, key, index) in options.organization" :key="index" :label="value" :value="key"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属中台" prop="middlePlatformId">
					<el-select v-model="dialog.addOrEdit.form.middlePlatformId" filterable placeholder="请选择所属中台" width="100%">
						<el-option v-for="(value, key, index) in options.middlePlatform" :key="index" :label="value" :value="key"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="能力输出模式" prop="outputModeCode">
					<el-select v-model="dialog.addOrEdit.form.outputModeCode" filterable placeholder="请选择能力输出模式" width="100%">
						<el-option v-for="(value, key, index) in options.outputMode" :key="index" :label="value" :value="key"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="能力编码" prop="abilityCode">
					<el-input
						v-model="dialog.addOrEdit.form.abilityCode"
						maxlength="10"
						show-word-limit
						placeholder="请输入能力编码"
						@change="handleAbilitySeqChange"
					>
						<!-- <template #prepend>{{ calcuAbilityCode }}</template> -->
					</el-input>
				</el-form-item>
				<el-form-item label="能力名称" prop="abilityName">
					<el-input v-model="dialog.addOrEdit.form.abilityName" placeholder="请输入能力名称" maxlength="100" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="能力团队标识" prop="abilityTeamSign">
					<el-input v-model="dialog.addOrEdit.form.abilityTeamSign" placeholder="请输入能力团队标识" maxlength="32" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="能力识别策略">
					<el-select v-model="dialog.addOrEdit.form.recognitionStrategy" filterable placeholder="请选择能力识别策略">
						<el-option v-for="(value, key, index) in options.recognitionStrategy" :key="index" :label="value" :value="key"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-select v-model="dialog.addOrEdit.form.status" filterable placeholder="请选择状态">
						<el-option v-for="(option, index) in options.abilityStatus" :key="index" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="描述" prop="remarks">
					<el-input
						v-model="dialog.addOrEdit.form.remarks"
						type="textarea"
						:rows="3"
						placeholder="请输入描述"
						maxlength="150"
						show-word-limit
					></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" :loading="dialog.addOrEdit.btnLoading" @click="handleSubmit(beforeAdd, beforeAdd)">确 定</el-button>
				<el-button @click="dialog.addOrEdit.open = false">取 消</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="tsx">
import Curd from '@/views/management/middle-platform/curd';
import { page, save, updateById, removeByIds } from '@/api/middle-platform/conf-ability';
import {
	systemOptions,
	mpOrgOptions,
	middlePlatformOptions,
	outputModeOptions,
	recognitionStrategyOptions,
	abilityStatus,
} from '@/views/management/middle-platform/select-option';

export default {
	name: 'ConfAbility',
	mixins: [Curd],
	data() {
		return {
			// 接口
			api: {
				query: page,
				add: save,
				edit: updateById,
				remove: removeByIds,
			},
			// 下拉选项
			options: {
				// 所属系统
				system: {},
				// 所属中台
				middlePlatform: {},
				// 所属单位
				organization: {},
				// 能力输出模式
				outputMode: {},
				// 能力识别策略
				recognitionStrategy: {},
				// 能力状态
				abilityStatus: [],
			},
			// 搜索表单
			formData: {
				...this.$route.query,
				pageSize: 10,
				pageNum: 1,
			},
			formOptions: [
				// {
				// 		type: 'select',
				// 		prop: 'abilityCode',
				// 		label: '能力编码',
				// 		isInitValue: false,
				// 		attrs: {
				// 			multiple: false,
				// 			clearable: true,
				// 		},
				// 		api: {
				// 			name: 'queryMpAbilityOptions',
				// 		},
				// 	},
				{
					type: 'input',
					prop: 'abilityCode',
					label: '能力编码',
					placeholder: '请输入能力编码',
					attrs: {
						clearable: true,
					},
				},
				{
					type: 'select',
					prop: 'orgCode',
					label: '所属单位',
					isInitValue: false,
					attrs: {
						multiple: false,
						clearable: true,
					},
					api: {
						name: 'getOrg',
					},
				},
				{
					type: 'input',
					prop: 'abilityName',
					label: '能力名称',
					placeholder: '输入能力名称模糊搜索',
					attrs: {
						clearable: true,
					},
				},
			],
			formBtns: [],
			tableConfig: {
				columns: [
					{
						label: '系统名称',
						prop: 'systemId',
						formatter: (row: any, val: any) => {
							return this.options.system[val];
						},
					},
					{
						label: '能力名称',
						prop: 'abilityName',
						renderXss: (row: any, val: any) => {
							return (
								<el-link type="primary" onClick={() => this.routeToService(row)}>
									{row.abilityName}
								</el-link>
							);
						},
					},
					{
						label: '能力编码',
						prop: 'abilityCode',
					},

					{
						label: '能力归属中台',
						prop: 'middlePlatformId',
						formatter: (row: any, val: any) => {
							return this.options.middlePlatform[val];
						},
					},
					{
						label: '能力输出模式',
						prop: 'outputModeCode',
						formatter: (row: any, val: any) => {
							return this.options.outputMode[val];
						},
					},
					{
						label: '所属单位',
						prop: 'orgCode',
						renderXss: (row: any, val: any) => {
							const orgName = this.options.organization[val];
							return (
								<el-link type="primary" onClick={() => this.routeToOrganization(orgName)}>
									{orgName}
								</el-link>
							);
						},
					},
					{
						label: '状态',
						prop: 'status',
						formatter: (row: any, val: any) => {
							switch (row.status) {
								case 1:
									return '已发布';
								case 2:
									return '已下架';
								default:
									return '已发布';
							}
						},
					},
					{
						label: '能力团队标识',
						prop: 'abilityTeamSign',
					},
					{
						label: '能力识别策略',
						prop: 'recognitionStrategy',
						formatter: (row: any, val: any) => {
							return this.options.recognitionStrategy[val];
						},
					},
					{
						label: '描述',
						prop: 'remarks',
					},
				],
				// 分页
				pagination: {
					pageNum: 1,
					total: 0,
				},
				// 加载层
				loading: false,
				// 启用复选框
				enableSelection: true,
				// 工具栏
				toolBar: [
					{ name: '新增', icon: 'yd-icon-plus', handler: () => this.handleAdd(undefined, true) },
					{ name: '修改', icon: 'yd-icon-edit', disable: 'single', handler: () => this.handleEdit(this.beforeEdit) },
					{ name: '删除', icon: 'yd-icon-delete', disable: 'multiple', handler: () => this.handleDelete() },
				],
			},
			tableData: [],
		};
	},
	computed: {
		calcuAbilityCode() {
			return (this.dialog.addOrEdit.form.middlePlatformId || '') + (this.dialog.addOrEdit.form.orgCode || '');
		},
	},
	created() {
		console.log(this.dialog.addOrEdit.form, 'this.dialog.addOrEdit.form');

		// 系统选项
		systemOptions().then((data: any) => {
			this.options.system = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
		// 所属单位选项
		mpOrgOptions().then((data: any) => {
			this.options.organization = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
		// 所属中台选项
		middlePlatformOptions().then((data: any) => {
			this.options.middlePlatform = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
		// 能力输出模式选项
		outputModeOptions().then((data: any) => {
			this.options.outputMode = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
		// 能力识别策略选项
		recognitionStrategyOptions().then((data: any) => {
			this.options.recognitionStrategy = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
		// 能力状态选项
		abilityStatus().then((data: any) => {
			this.options.abilityStatus = data;
		});
		// 设置校验规则
		this.dialog.addOrEdit.rule = {
			systemId: [{ required: true, message: '所属系统不能为空', trigger: 'change' }],
			middlePlatformId: [{ required: true, message: '所属中台不能为空', trigger: 'change' }],
			orgCode: [{ required: true, message: '所属单位不能为空', trigger: 'change' }],
			outputModeCode: [{ required: true, message: '能力输出模式不能为空', trigger: 'change' }],
			abilitySeq: [
				{ required: true, message: '序号不能为空', trigger: 'blur' },
				// { pattern: /^[0-9]*$/, message: '序号必须全为数字', trigger: 'blur' },
			],
			abilityCode: [
				{ required: true, message: '能力编码不能为空', trigger: 'blur' },
				// { pattern: /^[0-9]*$/, message: '序号必须全为数字', trigger: 'blur' },
			],
			abilityName: [{ required: true, message: '能力名称不能为空', trigger: 'blur' }],
			abilityTeamSign: [{ required: true, message: '能力团队标识不能为空', trigger: 'blur' }],
			// recognitionStrategy: [{ required: true, message: '能力识别策略不能为空', trigger: 'change' }],
			status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
		};
	},
	methods: {
		beforeAdd() {
			// this.dialog.addOrEdit.form.abilityCode = this.calcuAbilityCode + (this.dialog.addOrEdit.form.abilitySeq || '');
		},
		beforeEdit() {
			// const len = this.selected[0].abilityCode.length;
			// this.dialog.addOrEdit.form.abilityCode = this.selected[0].abilityCode.substr(len - 10);
		},
		handleAbilitySeqChange() {
			if (this.dialog.addOrEdit.form.abilitySeq) {
				// this.dialog.addOrEdit.form.abilitySeq = (Array(10).join('0') + this.dialog.addOrEdit.form.abilitySeq).slice(-10);
			}
		},
		routeToService(row: object) {
			this.$router.push({
				path: '/management/middle-platform/service',
				query: {
					abilityId: row.id,
				},
			});
		},
		routeToOrganization(orgName: string) {
			this.$router.push({
				path: '/management/middle-platform/organization',
				query: {
					orgName: orgName,
				},
			});
		},
	},
};
</script>

<style scoped></style>
